import { Button } from 'antd'
import React, { useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
import i18n from '../i18n/i18n'
import { useTranslation } from 'react-i18next'

function HeaderCom() {
      const {t}=useTranslation()
      //切换语言
      const changeLanguage=(lang)=>{
        i18n.changeLanguage(lang)
        localStorage.setItem('lang',lang)
        window.dispatchEvent(new Event('local-storage-langChange'));
      }
      
        const [isWhite,setIsWhite]=useState(()=>{
            const saved = localStorage.getItem('theme') // 获取本地存储中的主题
         return saved ==='white'|| (!saved&&window.matchMedia('(prefers-color-scheme:dark)').matches) // 如果本地存储中有主题，则使用本地存储的主题，否则使用系统主题
         
        })

        useEffect(()=>{
          // 根据 isWhite 更新主题
            document.documentElement.className=isWhite ? 'white-theme ':'blue-theme' 
             localStorage.setItem('theme',isWhite?'white':'blue') // 将主题存储到本地存储中
             window.dispatchEvent(new Event('local-storage-change')); // 手动触发自定义事件
        },[isWhite])

        // 监听 localStorage 变化（包括当前页面和跨标签页）
  useEffect(() => {
    // 1. 定义更新状态的函数
    const updateTheme = () => {
      setIsWhite(localStorage.getItem('theme') === 'white');
    };

    // 2. 初始化主题状态
    updateTheme();

    // 3. 监听当前页面的自定义事件（手动触发）
    const handleLocalChange = () => updateTheme();
    window.addEventListener('local-storage-change', handleLocalChange);

    // 4. 监听其他标签页的 storage 事件
    window.addEventListener('storage', updateTheme);

    // 清理事件监听
    return () => {
      window.removeEventListener('storage', updateTheme);
      window.removeEventListener('local-storage-change', handleLocalChange);
    };
  }, []);
  return (
    <div className={isWhite ? 'blue-logo':'white-logo'} style={{display:'flex',justifyContent:'end'}}>
         
      <div style={{margin:"50px 10px"}}>
           <NavLink to="/3D" style={{textDecoration:'none',marginTop:'0px 10px'}}>{t('threeD')}</NavLink>
       <Button style={{margin:'0px 10px'}} 
       color='primary'  
       onClick={()=>setIsWhite(!isWhite)}
     
       variant="outlined">{t('changeTheme')}</Button>

       <select 
       value={i18n.language} 
       onChange={(e)=>changeLanguage(e.target.value)}
       style={{border:'none',outline:'none',fontSize:'18px'}}
       >
            <option value="en">English</option>
              <option value="zh">中文</option>
        </select>

      
      </div>
     
    </div>

  )
}

export default HeaderCom
